<template>
  <h2>reactive的使用</h2>
  <h3>名字：{{ user.name }}</h3>
  <h3>年龄：{{ user.age }}</h3>
  <h3>性别：{{user.gender}}</h3>
  <h3>媳妇：{{ user.wife }}</h3>
  <hr />
  <button @click="updateUser">更新数据</button>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";

export default defineComponent({
  name: "App",
  //需求：显示用户的相关信息，点击按钮，更新用户的相关信息数据
  setup() {
    //const obj: any = { //为了在使用obj.gender='男'的时候不出现错误提示信息采这么书写
    const obj = {
      name: "小红",
      age: 20,
      wife: {
        name: "小白",
        age: 18,
        cars: ["奔驰", "宝马", "奥迪"],
      },
    }
    //把数据变成响应式数据
    //返回的是一个Proxy的代理对象，被代理的目标对象就是obj对象
    //user是代理对象，obj是目标对象
    const user = reactive<any>(obj);
    console.log(user);

    //function updateUser() {}
    const updateUser = () => {
      //直接使用目标对象的方式来更新目标对象中的成员的值，是不可能的
      //只能使用代理对象的方式来更新数据（响应式数据）
      //obj.name += '===';

      user.name += '==';
      user.age += 2;
      user.wife.name += '++';
      user.wife.cars[0] = '五菱宏光';

      //------------------------------------------------------------

      //user-->代理对象，obj目标对象

      //user对象或者obj对象添加一个新的属性，哪一种方式会影响界面的更新
      //obj.gender = '男';//属性确实加到对象上去了，但是界面没有更新渲染
      //user.gender = '男';//界面可以更新渲染，且数据也添加到obj对象上

      //user对象或者obj对象中移除一个已经存在的属性，哪一种会影响界面的更新
      //delete obj.age;//界面没有更新喧嚷，obj中确实没有age属性
      //delete user.age;//界面更新渲染，obj中的age也被删除
    }
    return {
      user,
      updateUser,
    };
  },
});
</script>